<?php
/**
 * 查询select
 * note:带分页
 * User: apple
 * Date: 1/23/22
 * Time: 9:54 PM
 */

use app\assets\BackendAsset;

/* @var $this yii\web\View */
/* @var $_params_ array 总参数变量 */
/* @var $prefix string 前缀 */
/* @var $className string CLASS */
/* @var $title string 标题Js变量 */
/* @var $value string 绑定值Js变量 */
/* @var $list string 数据列表Js变量 */
/* @var $page string 分页Js变量 */
/* @var $pageSize string 分页大小Js变量 */
/* @var $dataTotal string 数据总条数Js变量 */
/* @var $loading string 是否加载中Js变量 */
/* @var $getList string 获取列表方法 */
/* @var $disabled string 是否禁用Js变量 */

if (!isset($value) || is_numeric($value)) throw new Exception('value 绑定值不能为空');
if (!isset($list)) throw new Exception('list 数据列表不能为空');
if (!isset($getList) || is_numeric($getList)) throw new Exception('getList 获取列表方法不能为空');
if (!isset($page)) throw new Exception('page 页码不能为空');
if (!isset($pageSize)) throw new Exception('pageSize 分页大小不能为空');
if (!isset($dataTotal)) throw new Exception('dataTotal 数据总条数不能为空');
if (!isset($loading)) throw new Exception('loading 加载中不能为空');

// 前缀
$prefix = empty($prefix) ? 'search' : $prefix;
// 数据列表
$list = empty($list) ? '' : ":list.sync='{$list}'";
// 分页
$page = empty($page) ? '' : ":page.sync='{$page}'";
// 分页大小
$pageSize = empty($pageSize) ? '' : ":page-size='{$pageSize}'";
// 数据总条数
$dataTotal = empty($dataTotal) ? '' : ":data-total='{$dataTotal}'";
// 分页大小
$loading = empty($loading) ? '' : ":loading.sync='{$loading}'";
// 获取列表 方法
$getList = ":get-list='{$getList}'";
// 是否禁用
$disabled = empty($disabled) ? '' : ":disabled='{$disabled}'";

$props = implode(" ", array_filter([$list, $page, $pageSize, $dataTotal, $loading, $getList, $disabled]));
// HTML
$template = <<<HTML

<div>
    <el-select placeholder="请选择{$title}" size="small" class="{$className}" collapse-tags
            :remote-method="getList" v-model="innerValue" filterable reserve-keyword
            remote ref="select" :disabled="disabled">

        <div element-loading-text="加载中..." element-loading-background="rgba(255, 255, 255, 0.8)" v-loading.lock="loading">
            <el-option v-for="item in list" :value="item.value" :label="item.text"></el-option>
    
            <el-pagination :total="dataTotal"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page.sync="page"
                           :page-sizes="[1, 20, 50, 100, 200]"
                           :page-size.sync="pageSize"
                           layout="total, prev, pager, next, jumper"
                           class="pt-10 pb-5 ph-15">
            </el-pagination>
        </div>

    </el-select>
</div>

HTML;
$js = <<<EOT

Vue.component('searchSelect', {
    template: `$template`,
    model: {
        prop: "value",
        event: "change",
    },
    props: {
        value: { // 值
            type: Number,
            required: true, // 是否必须
        },
        list: { // 数据列表
            type: Array,
            default: [],
            required: true, // 是否必须
        },
        page: { // 第几页
            type: Number,
            default: 1,
            required: true, // 是否必须
        },
        pageSize: { // 分页大小
            type: Number,
            default: 1,
            required: true, // 是否必须
        },
        dataTotal: { // 数据条目总数
            type: Number,
            default: 0,
            required: true, // 是否必须
        },
        loading: { // 加载中
            type: Boolean,
            default: false,
            required: true, // 是否必须
        },
        getList: { // 获取列表方法
            type: Function,
            default: function (\$query) {},
            required: true, // 是否必须
        },
        disabled: { // 是否禁用
            type: Boolean,
            default: false,
        },
    },
    data: function () {
        return {};
    },
    created: function () {
        var that = this;
        this.\$nextTick(function () {});
    },
    methods: {
        /**
         * 检测分页大小改变
         */
        handleSizeChange: function () {
            // 改为第一页
            this.page = 1;
            var ref = this.\$refs['select'];
            // 运行加载下一页
            this.getList(ref ? ref.query : null);
        },
        /**
         * 检测分页第几页改变
         */
        handleCurrentChange: function () {
            var ref = this.\$refs['select'];
            // 运行加载下一页
            this.getList(ref ? ref.query : null);
        }
    },
    computed: {
        innerValue: {
            get: function () {
                return this.value;
            },
            set: function (\$val) {
                this.\$emit("change", \$val);
            },
        }
    },
    watch: {
        'page': function (\$value) {
            this.\$emit('update:page', \$value);
        }
    }
});
EOT;
$css = <<<CSS
    .el-loading-mask .el-loading-spinner {top: 40%}
CSS;

if (empty($this->params['reg_search_select'])) $this->registerCss($css);
if (empty($this->params['reg_search_select'])) $this->registerJs($js);
// 已注册过
$this->params['reg_search_select'] = true;
echo "<search-select ref='searchSelect_$prefix' v-model='{$value}' {$props}></search-select>";
?>
